<template>
 <div style="margin-bottom: 20px;display: flex;align-items: center;justify-content: space-between">
   <a-form
       layout="inline"
       :model="queryFrom"
   >
     <a-form-item>
       <a-input v-model:value="queryFrom.userName" placeholder="用户名"/>
     </a-form-item>

     <a-form-item>
       <a-button type="primary" @click="search">搜索</a-button>
     </a-form-item>
     <a-form-item>
       <a-button @click="reset">重置</a-button>
     </a-form-item>
   </a-form>
   <a-button type="primary" v-auth="['sys:role:add']" @click="show=true">新增</a-button>
 </div>
  <a-table :columns="columns"
           :data-source="dataList"
           :pagination="pagination"
           rowKey="roleId"

  >
    <template #bodyCell="{ column, record }">
     <template v-if="column.dataIndex!=='operation'">
       <span>{{record[column.dataIndex]}}</span>
     </template>

      <template v-if="column.dataIndex==='operation'"
                v-auth="['sys:role:edit','sys:role:delete']">
       <div style="display: flex;width: 100%;justify-content: center;align-items: center">
         <div v-auth="['sys:role:edit']">
           <a-button type="link" size="small" @click="openModel(record)">编辑</a-button>
         </div>
         <div  v-auth="['sys:role:delete']">
           <a-popconfirm
               title="确定删除吗"
               @confirm="remove(record)"
               ok-text="确定"
               cancel-text="取消"
           >
             <a-button danger type="link" size="small">删除</a-button>
           </a-popconfirm>

         </div>
       </div>


      </template>
    </template>
  </a-table>
  <add-or-update v-model="show" :user="user" @success="success"/>
</template>
<script setup lang="ts">
import {onMounted, ref, defineComponent} from "vue";
import {message} from "ant-design-vue";
import {queryRoleList,delRole} from '@/api/sys-setting/role.ts'
import AddOrUpdate from "./add-or-update.vue";
import {UserInfo} from "@/types/global.ts";

defineComponent({
  AddOrUpdate
})

const generateQueryFrom = ()=>{
  return{
    pageNo:1,
    pageSize:10
  }
}
const generatePagination = ()=>{
  return{
    current:1,
    size:'10',
    total:0
  }
}
const generateUser = ():UserInfo=>{
  return{
    userName:'',
    password:'',
    type:0,
    lockFlag:0,
    phone:''

  }
}
const queryFrom = ref<any>(generateQueryFrom())
const pagination = ref(generatePagination())

const dataList = ref([])
const columns = [
  {
    title: '编号',
    dataIndex: 'roleId',
    key: 'roleId',
    align:'center'
  },
  {
    title: '角色名称',
    dataIndex: 'roleName',
    key: 'roleName',
    align:'center'
  },
  {
    title: '角色编码',
    dataIndex: 'roleCode',
    key: 'roleCode',
    align:'center'
  },
  {
    title: '描述',
    dataIndex: 'roleDesc',
    key: 'roleDesc',
    align:'center'
  },
  {
    title: '创建人',
    dataIndex: 'createBy',
    key: 'createBy',
    align:'center'
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    align:'center'
  },
  {
    title: '操作',
    dataIndex:'operation',
    key: 'operation',
    align:'center'
  }
];


const show = ref(false)
const user = ref(generateUser());
const getList = ()=>{
  queryRoleList(queryFrom.value).then((res:any)=>{
    dataList.value = res.result.records;
    pagination.value.total = res.result.total
  })
}

const openModel = (row:any)=>{
  console.log(row)

  user.value = {...row};
  show.value =true;
}
const success =()=>{
  message.success('操作成功');
  show.value = false;
  getList();
}
const remove = (row:UserInfo)=>{


  delRole({id:row.userId}).then((res:any)=>{
    if(res&&res.code===200){
      message.success("操作成功");
      getList()
    }
  })
}
const search = ()=>{
  queryFrom.value.pageNo = 1;
  getList();
}
const reset = ()=>{
  queryFrom.value = generateQueryFrom();
  getList();
}
onMounted(()=>{
  getList();
})
</script>
<style scoped lang="scss">

</style>
